<%--
  Created by IntelliJ IDEA.
  User: 26421
  Date: 2020/8/11
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/reset.css">
    <%--layui css--%>
    <link rel="stylesheet" href="../static/layui/css/layui.css">

    <style>
        #content{
            width: 1226px;
            background-color: gray;
            margin: 5px auto;
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
        #content .list-wrapper{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        #content .list-wrapper .list-item{
            background-color: rgba(0, 0, 0, 0.15);
            margin: 12px auto;
            display: flex;
            justify-content: space-between;

            width: 100%;
            height: 86px;
        }
        #content .list-wrapper .list-item .order1{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 230px;
        }
        #content .list-wrapper  .list-item .order2{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 380px;
        }
        #content .list-wrapper  .list-item .order3{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 140px;
            padding-right:18px;
        }
        #content .list-wrapper .list-item .order4{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 150px;
        }
        #content .list-wrapper .list-item .order5{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 120px;
            padding-right: 81px;
        }
        #content .list-wrapper .list-item .order6{
            display: flex;
            justify-items: center;
            align-items: center;
            width: 80px;
        }

        #content .list-wrapper .list-item .img-wrapper{
            display: flex;
            justify-items: center;
            align-items: center;
            margin-left: 20px;
        }

        #content .list-wrapper .list-item .img-wrapper .activePath{
            display: flex;
            justify-items: center;
            align-items: center;

        }

        #content .list-wrapper .list-item .price-wrapper{

        }


    </style>
</head>
<body>

<%--搜索框--%>
<style>
    #search {
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #search .layui-form-item .layui-input-inline:nth-child(1) {
        margin-right: 0;
        width: 400px;
    }

    #search .layui-input, #search .layui-select, .layui-textarea {
        border: 2px solid #009688;
        border-radius: 0px;

    }


    #search .layui-btn {
        border-radius: 0px;
    }
</style>
<div id="search">
    <form action="/api/good/selectOrderList" method="get" class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="aid" autocomplete="off" class="layui-input" placeholder="搜索">
                </div>
                <div class="layui-input-inline">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--内容--%>
<div id="content">
    <div class="list-wrapper">
        <div class="list-item">
            <div class="order1">
                <input type="checkbox">全选 </input>
            </div>
            <div class="order2" >
                <p>商品名称</p>
            </div>
            <div class="order3" >
                <p>单价</p>
            </div>
            <div class="order4" >
                <p>数量</p>
            </div>
            <div class="order5" >
                <p>商小计</p>
            </div>
            <div class="order6">
                <p>操作</p>
            </div>

        </div>
        <c:forEach items="${list}" var="item">
            <div class="list-item">
                <div class="order1">
                    <input type="checkbox">
                    <div class="img-wrapper">
                        <a href="/api/good/selectById?gid=${item.gid}">
                            <img class="activePath" src="${item.activePath}" alt="" width="80" height="80">
                        </a>
                    </div>
                </div>

                <div class="order2">
                    <p class="title">${item.title}</p>
                </div>
                <div class="order3">
                        ${item.price}
                </div>
                <div class="order4">

<%--                    <p>数量1</p>--%>
    <input id="dec" type="button" value="-">
    <input id="count" type="text" value="${item.orders}" size="1" style="text-align:center;" >
    <input id="inc" type="button" value="+">

                </div>
                <script>
                    window.onload = function() {
                        var count = document.getElementById("count");
                        var inc = document.getElementById("inc");
                        var dec = document.getElementById("dec");
                        inc.onclick = function() {
                            count.value = parseInt(count.value) + 1;
                            //可以绑定增减方法，来修改数据库
                        };
                        dec.onclick = function() {
                            if(parseInt(count.value)>1){
                                count.value = parseInt(count.value) - 1;
                            }

                        };

                    };

                </script>




                <div class="order5">
                    <p>${(item.price)*(item.orders)}</p>
                </div>
                <div class="order6">
                    <input type="button" width="10" height="10" >
                </div>
            </div>
        </c:forEach>

    </div>
</div>



<%--jquery--%>
<script src="../static/js/jquery.min.js"></script>
<%--layui js--%>
<script src="../static/layui/layui.all.js"></script>
</body>
</html>
